<template>
  <div>
    <div class="news" v-for="(item, index) in newlist" :key="index" @click="tonews_details(item.id)">
      <div class="card">
        <div class="card-img-box">
          <img :src="item.img_url" alt="" class="card-img-img" />
        </div>
        <div class='right-box'>
          <div class="card-title">
            <span>{{ item.title }}</span>
          </div>
          <div class="card-title-bottom">
            <p class="card-data-time">发表时间：{{ item.add_time | dateFormat }}</p>
            <p class="card-click">点击：{{ item.click }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { log } from "util";
export default {
  data() {
    return {
      newlist: []
    };
  },
  created() {
    this.getnews();
  },
  methods: {
    async getnews() {
      const res = await this.$http.get("/api/getnewslist"); //get请求是使用 params获取参数
      console.log(res.data.message);
      this.newlist = res.data.message;
    },
    tonews_details(id) {
      // this.$router.push("/news_detail/?id=" + id);
      this.$router.push({path:"/new_detail",query:{userid:id}})
    }
  }
};
</script>

<style scoped>
.card {
    border-bottom: 1px #eee solid;
    /* height:43px; */
    padding: 7px;
}
.right-box {
    margin:-45px 0 0 0 ;
}
/* .card {
    position:relative;
    background: #fff;
    border-bottom: 1px solid #eee;
    margin: 0 10px;
    padding: 10px;
    border-bottom: #eee 1px solid;
} */
.card-img-box {
  width: 42px;
  height: 42px;
  background: pink;
  text-align: center;
  margin-top:10px;
  margin-left: 10px;
}
.card-img-img {
  width: 100%;
  height: 100%;
}
.card-title {
  font-size: 14px;
  font-weight: 700;
  color: #000;
  text-align:left;
  padding-left: 55px;
  /* height: 17px; */
  /* position: absolute;
    top:-4px;
    right:-7px; */
}
.card-title-bottom {
    position: relative;
    margin-top:28px;
}
.card-data-time {
    position: absolute;
    top:-30px;
    left:60px;
    color: #226aff;
    font-size:12px;

}
.card-click {
    position: absolute;
    top:-30px;
    right:0px;
    color: #226aff;
    font-size:12px;
}
/* .card-date {
    position:absolute;
    left: 60px;
    bottom: -10px;
    display: inline-block;
    line-height: 30px;
    color: #226aff;
}
.card-date p {
    display: inline-block;
    font-size:12px;
}
.card-click {
    position: absolute;
    right: 5px;
    bottom: -2px;
    color: #226aff;
}
.card-click p {
    display: inline-block;
    font-size: 12px;
} */
</style>
